<template>
	<div class="main-boards">
		<template v-for="item in boardList">
			<el-card class="board-item" :key="item.id" v-if="item.topics.length" :id="item.created_at">
				<div class="head">
					<div class="title">{{item.name}}</div>
					<el-text class="more" @click="searchMore(item.id)">
						查看更多({{item.topicsTotal}})
						<el-icon><DArrowRight /></el-icon>
					</el-text>
				</div>
				<template v-if="item.topics.length">
					<TopicItem v-for="(top, index) in item.topics" :data="top" :index="index"/>
				</template>
				<el-empty v-else description="暂无数据!"/>
			</el-card>
		</template>
	</div>
</template>
<script setup lang="ts">
import {board_list, topic_list} from '/@/api/forum'
import {ref, onMounted} from 'vue'
import TopicItem from "./TopicItem.vue";
import emitter from '/@/utils/emitter.js'
import {useRouter} from "vue-router";
const router = useRouter();
//板块列表
const boardList = ref([])
const getBoardList = async ()=>{
	const res = await board_list()
	const arr = res.data.boards
	for (const borad of arr){
		//获取该板块下的前6条主题
		const result = await topic_list({page: 1, page_size: 6, board_id: borad.id})
		borad.topics = result.data.topics
		borad.topicsTotal = result.data.total
	}
	boardList.value = arr
}
getBoardList()

const searchMore = (id)=>{
	window.localStorage.setItem('search_temp_params', JSON.stringify({
		keyword: '',
		board: id
	}))
	router.push({
		path: '/forumSearch'
	})
}

onMounted(()=> {
	emitter.on('refreshBoard', ()=>{
		getBoardList()
	})
})

</script>
<style scoped lang="scss">
.main-boards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
}

.board-item {
	width: 100%;
	height: 300px;
	overflow: hidden;
	.head{
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgb(177.3, 179.4, 183.6);
		margin-bottom: 10px;
		.title{
			font-weight: 600;
			line-height: 40px;
			display: flex;
			align-items: center;
			&:before{
				display: inline-block;
				content: '';
				height: 30px;
				width: 4px;
				background: #409eff;
				margin-right: 8px;
				border-radius: 2px;

			}
		}
		.more{
			cursor: pointer;
			&:hover{
				color: #409eff;
			}
		}
	}
}
</style>
